<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-form ref="form" :model="form" label-width="80px" :inline="true">
          <el-row style="margin-bottom:10px">
            <el-col :span="8">
              <el-form-item label="标签名称" prop="tags">
                <el-input
                  v-model="form.tags"
                  style="width:300px;height:32px"
                  placeholder="请输入内容"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="城市" prop="userCitys" @change="hchangecity">
                <!-- <el-select
                  v-model="form.region"
                  placeholder="请选择"
                  style="width:300px;height:32px"
                >
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select> -->
                <el-select
                  v-model="form.userCitys"
                  placeholder="请选择"
                  style="width:300px;height:32px"
                >
                  <el-option
                    v-for="(item, index) in form.citys"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="地区">
                <!-- <el-select
                  v-model="form.region"
                  placeholder="请选择"
                  style="width:300px;height:32px"
                >
                  <el-option label="区域一" value="shanghai" />
                  <el-option label="区域二" value="beijing" />
                </el-select> -->
                <el-select
                  v-model="form.usercitys2"
                  placeholder="请选择"
                  style="width:300px;height:32px"
                >
                  <el-option
                    v-for="(item, index) in form.citys2"
                    :key="index"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="企业简称" prop="shortName">
                <el-input
                  v-model="form.shortName"
                  style="width:300px;height:32px"
                  placeholder="请输入内容"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态：" prop="state">
                <el-select
                  v-model="form.state"
                  class="filter-item"
                  style="width:300px;height:32px"
                  @keyup.enter="search"
                >
                  <el-option
                    v-for="item in status"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-button
              type="primary"
              class="clear"
              plain
              @click="clear"
            >清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button
              type="success"
              @click="showDialog = true"
            >新增用户</el-button>
          </el-row>
        </el-form>

        <!-- 数据记录 -->
        <el-alert
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        />
        <el-table :data="list" style="width: 100%">
          <el-table-column prop="id" label="序号" width="180" align="center" />
          <el-table-column prop="number" label="企业编号" align="center" />
          <el-table-column prop="shortName" label="企业简称" align="center" />
          <el-table-column prop="tags" label="标签" align="center" />
          <el-table-column prop="creatorID" label="创建者" align="center" />
          <!-- <el-table-column prop="addDate" label="创建日期" align="center" /> -->

          <el-table-column prop="addDate" label="创建日期" align="center">
            <!-- <template slot-scope="obj"></template> -->
            <template slot-scope="{ row }">
              <!-- 将时间进行格式化 -->
              {{ row.addDate | formatTime }}
            </template>
          </el-table-column>

          <el-table-column prop="remarks" label="备注" align="center" />
          <el-table-column prop="state" label="状态" align="center">
            <template slot-scope="{ row }">
              <span
                v-if="row.state == 1"
              ><el-tag type="success">启用</el-tag></span>
              <span v-else><el-tag type="warning">禁用</el-tag></span>
            </template>
          </el-table-column>
          <!-- <el-form-item label="状态：" prop="state">
            <el-select
              v-model="form.state"
              class="filter-item"
              style="width: 100px;"
              @keyup.enter="search"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item> -->
          <el-table-column label="操作" align="center">
            <template slot-scope="{ row }">
              <el-button
                type="primary"
                plain
                circle
              ><i
                class="el-icon-edit"
                @click="edit(row.id)"
              /></el-button>
              <el-button
                v-if="row.state == 0"
                type="success"
                plain
                circle
              ><i
                class="el-icon-check"
                @click="changeState(row)"
              /></el-button>
              <el-button
                v-else
                type="warning"
                plain
                circle
              ><i
                class="el-icon-close"
                @click="changeState(row)"
              /></el-button>
              <el-button
                type="danger"
                plain
                circle
              ><i
                class="el-icon-delete"
                @click="del(row.id)"
              /></el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            background
            layout="prev, pager, next, sizes, total, jumper"
            :page-size="page.pagesize"
            :current-page="page.page"
            :total="page.total"
            :page-sizes="[2, 4, 6, 8, 10]"
            @current-change="changePage"
            @size-change="changeSize"
          />
        </el-row>
      </el-card>
      <!-- 弹层 -->
      <add-role ref="edit" :show-dialog.sync="showDialog" @add="getCompanys" />
    </div>
  </div>
</template>
<script>
import { getCompanys, delCompanys, changeState } from '@/api/list'
import { status } from '@/api/constants'
import { provinces, citys } from '@/api/citys'
import addRole from './components/add-role.vue'
const defultItem = {
  page: 1, // 当前页码
  pagesize: 2,
  total: 0 // 总数
}
export default {
  name: 'List',
  components: { addRole },
  data() {
    return {
      form: {
        tags: '',
        region: '',
        citys: [],
        citys2: [],
        userCitys: '',
        usercitys2: '',
        shortName: '',
        state: ''
      },
      list: [],
      page: {
        ...defultItem
      },
      showDialog: false,
      alertText: ''
    }
  },
  computed: {
    status() {
      return status
    }
  },
  watch: {
    'form.userCitys': {
      async handler(newValue) {
        const res = await citys(newValue)
        this.form.citys2 = res
      },
      immediate: true
    }
  },
  created() {
    this.getCompanys()
    this.loadCitys()
  },
  methods: {
    async getCompanys() {
      if (this.form.state === 0 || this.form.state === 1) {
        const { data } = await getCompanys({
          ...this.page,
          tags: this.form.tags,
          shortName: this.form.shortName,
          state: this.form.state ? 1 : 0
        })
        this.page.total = data.counts
        this.alertText = `共 ${this.page.total} 条记录`
        this.list = data.items
      } else {
        const { data } = await getCompanys({
          ...this.page,
          tags: this.form.tags,
          shortName: this.form.shortName
        })
        this.page.total = data.counts
        this.alertText = `共 ${this.page.total} 条记录`
        this.list = data.items
      }
    },
    changePage(newPage) {
      this.page.page = newPage
      this.getCompanys()
    },
    // 每页数量修改事件
    changeSize(val) {
      // val是每页最新的条数
      this.page.size = val
      this.getCompanys()
    },
    // 删除
    async del(id) {
      try {
        await this.$confirm('确定删除吗？', '提示', {
          type: 'warning'
        })
          .then(async() => {
            await delCompanys(id)
            if (this.list.length === 1 && this.page.page !== 1) {
              this.page.page--
            }
            this.$message.success('删除成功')
            this.getCompanys()
          })
          .catch(() => {
            this.$message.info('取消删除')
          })
      } catch (err) {
        console.log(err)
      }
    },
    // 更改状态
    async changeState(row) {
      try {
        await this.$confirm('确定更改状态吗？', '提示', {
          type: 'warning'
        })
          .then(async() => {
            row.state = row.state ? 0 : 1
            await changeState(row)
            this.$message.success('删除成功')
            this.getCompanys()
          })
          .catch(() => {
            this.$message.info('取消更改状态')
          })
      } catch (err) {
        console.log(err)
      }
    },
    // 获取请求 所有的城市
    async loadCitys() {
      try {
        const res = await provinces()
        // console.log(res)
        this.form.citys = res
      } catch (err) {
        console.log(err)
      }
    },
    // 当城市更换的时候将后面的城区清空
    hchangecity() {
      this.form.usercitys2 = ''
    },
    // 搜索
    async search() {
      this.page = { ...defultItem }
      this.getCompanys()
    },
    clear() {
      this.form = ''
      this.getCompanys()
    },
    // 编辑
    edit(id) {
      this.$refs.edit.userId = id
      this.$refs.edit.getDetails(id)
      this.showDialog = true
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 10px 10px;
  .app-container {
    padding: 20px;
    .el-card {
      border: 1px solid #ebeef5;
      background-color: #fff;
      color: #303133;
      .clear {
        margin-left: 20px;
      }
    }
  }
}
</style>
